<template>
  <div class="pubg-guide-section">
    <div class="container">
      <!-- 热门武器推荐 -->
      <section class="guide-section">
        <div class="section-header">
          <h2>热门武器推荐</h2>
          <a href="#" class="view-more">查看更多 ></a>
        </div>
        <div class="guide-cards">
          <div v-for="(weapon, index) in weapons" :key="index" class="guide-card">
            <div class="card-image" :style="{ backgroundImage: `url(${weapon.imageUrl})` }"></div>
            <div class="card-content">
              <h3 class="card-title">{{ weapon.title }}</h3>
              <p class="card-description">{{ weapon.description }}</p>
              <div class="card-meta">
                <span class="read-count">{{ weapon.readCount }} 阅读</span>
                <span class="update-time">{{ weapon.updateTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 地图攻略 -->
      <section class="guide-section">
        <div class="section-header">
          <h2>地图攻略</h2>
          <a href="#" class="view-more">查看更多 ></a>
        </div>
        <div class="map-grid">
          <div v-for="(map, index) in maps" :key="index" class="map-card">
            <div class="map-image" :style="{ backgroundImage: `url(${map.imageUrl})` }"></div>
            <div class="map-overlay">
              <h3>{{ map.name }}</h3>
              <p>{{ map.feature }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 战术技巧 -->
      <section class="guide-section">
        <div class="section-header">
          <h2>战术技巧</h2>
          <a href="#" class="view-more">查看更多 ></a>
        </div>
        <div class="tactics-list">
          <div v-for="(tactic, index) in tactics" :key="index" class="tactic-item">
            <div class="tactic-number">{{ index + 1 }}</div>
            <div class="tactic-content">
              <h3>{{ tactic.title }}</h3>
              <p>{{ tactic.description }}</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
const weapons = [
  {
    title: "M416全面解析：中近距离的王者",
    description: "M416作为游戏中最稳定的步枪之一，如何搭配配件才能发挥最大威力？",
    imageUrl: "/src/assets/pubg-images/weapon-m416.svg",
    readCount: 25800,
    updateTime: "2024-01-15"
  },
  {
    title: "AWM使用技巧：一枪毙命的艺术",
    description: "掌握AWM的使用时机和射击技巧，成为战场上令人闻风丧胆的狙击手。",
    imageUrl: "/src/assets/pubg-images/weapon-awm.svg",
    readCount: 18600,
    updateTime: "2024-01-10"
  },
  {
    title: "Vector冲锋枪：近战神器",
    description: "高射速、高稳定性，Vector在近战中展现出无与伦比的优势。",
    imageUrl: "/src/assets/pubg-images/weapon-vector.svg",
    readCount: 12400,
    updateTime: "2024-01-05"
  }
]

const maps = [
  {
    name: "海岛地图",
    feature: "经典地图，资源丰富，适合各种战术",
    imageUrl: "/src/assets/pubg-images/map-island.svg"
  },
  {
    name: "沙漠地图",
    feature: "视野开阔，车辆重要，战术性强",
    imageUrl: "/src/assets/pubg-images/map-desert.svg"
  },
  {
    name: "雨林地图",
    feature: "节奏快，植被茂密，适合近战",
    imageUrl: "/src/assets/pubg-images/map-rainforest.svg"
  },
  {
    name: "雪地地图",
    feature: "地形复杂，隐蔽性差，需要精确射击",
    imageUrl: "/src/assets/pubg-images/map-snow.svg"
  }
]

const tactics = [
  {
    title: "落地成盒？这些落点选择技巧帮你提高生存率",
    description: "选择合适的落点是游戏胜利的第一步，避开热门区域，寻找资源丰富的冷门地点。"
  },
  {
    title: "团队配合技巧：如何与队友高效沟通",
    description: "良好的团队沟通是吃鸡的关键，学会使用标记系统，及时分享敌人位置和资源信息。"
  },
  {
    title: "决赛圈技巧：如何在最后阶段脱颖而出",
    description: "决赛圈的每一个决策都至关重要，掌握地形利用、移动时机和射击技巧。"
  },
  {
    title: "枪法提升：压枪、预瞄和闪身射击详解",
    description: "提升枪法需要不断练习，掌握压枪技巧、预瞄习惯和闪身射击的时机。"
  }
]
</script>

<style scoped>
.pubg-guide-section {
  background-color: var(--color-background);
  padding: 2rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.guide-section {
  margin-bottom: 3rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.section-header h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-heading);
  margin: 0;
}

.view-more {
  color: var(--color-pubg-primary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.view-more:hover {
  color: var(--color-pubg-primary-dark);
}

/* 武器推荐卡片 */
.guide-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.guide-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.guide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-image {
  height: 180px;
  background-size: cover;
  background-position: center;
}

.card-content {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

.card-description {
  font-size: 0.95rem;
  color: #666;
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #999;
}

/* 地图攻略 */
.map-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.map-card {
  position: relative;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.map-card:hover {
  transform: scale(1.05);
}

.map-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: filter 0.2s;
}

.map-card:hover .map-image {
  filter: brightness(0.7);
}

.map-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 1rem;
  color: white;
}

.map-overlay h3 {
  font-size: 1.1rem;
  margin: 0 0 0.25rem 0;
}

.map-overlay p {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.9;
}

/* 战术技巧 */
.tactics-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.tactic-item {
  display: flex;
  gap: 1rem;
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.tactic-item:hover {
  transform: translateY(-3px);
}

.tactic-number {
  width: 36px;
  height: 36px;
  background-color: var(--color-pubg-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.tactic-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
}

.tactic-content p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .guide-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .map-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .guide-cards,
  .tactics-list {
    grid-template-columns: 1fr;
  }
  
  .map-grid {
    grid-template-columns: 1fr;
  }
  
  .map-card {
    height: 150px;
  }
}
</style>